<template>
  <div class="dashboard">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">仪表盘</h1>
      <p class="page-subtitle">欢迎使用万象鉴真平台，您的数字安全守护者</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon">
          <svg viewBox="0 0 24 24">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ stats.totalDetections }}</h3>
          <p class="stat-label">总检测次数</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11.5C14.8,12.6 13.4,14 12,14C10.6,14 9.2,12.6 9.2,11.5V10C9.2,8.6 10.6,7 12,7Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ stats.blockedThreats }}</h3>
          <p class="stat-label">拦截威胁</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ stats.aiDetections }}</h3>
          <p class="stat-label">AI内容检测</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ stats.voiceAnalysis }}</h3>
          <p class="stat-label">声纹分析</p>
        </div>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <h2 class="section-title">快速操作</h2>
      <div class="action-grid">
        <div class="action-card" @click="quickAction('rumor')">
          <div class="action-icon">
            <svg viewBox="0 0 24 24">
              <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
            </svg>
          </div>
          <h3>谣言检测</h3>
          <p>检测文本和图像中的谣言信息</p>
        </div>

        <!-- 反诈知识库卡片 -->
        <div class="action-card" @click="quickAction('fraud')">
          <div class="action-icon">
            <svg viewBox="0 0 24 24">
              <path d="M4 19.5A2.5 2.5 0 0 0 6.5 22h11a2.5 2.5 0 0 0 2.5-2.5V6.5A2.5 2.5 0 0 0 17.5 4h-11A2.5 2.5 0 0 0 4 6.5v13z"/>
              <path d="M4 6.5V19.5"/>
            </svg>
          </div>
          <h3>反诈知识库</h3>
          <p>学习和掌握各类防诈骗知识</p>
        </div>

        <!-- AI安全助手卡片 -->
        <div class="action-card" @click="quickAction('ai')">
          <div class="action-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"/>
            </svg>
          </div>
          <h3>AI安全助手</h3>
          <p>智能解答AI与信息安全问题</p>
        </div>

        <div class="action-card" @click="quickAction('voice')">
          <div class="action-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
            </svg>
          </div>
          <h3>声纹识别</h3>
          <p>分析和识别音频中的声纹特征</p>
        </div>
      </div>
    </div>

    <!-- 最近检测记录 -->
    <div class="recent-detections">
      <h2 class="section-title">最近检测记录</h2>
      <div class="table-container">
        <table class="detection-table">
          <thead>
            <tr>
              <th>检测时间</th>
              <th>检测类型</th>
              <th>内容摘要</th>
              <th>结果</th>
              <th>可信度</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in recentDetections" :key="record.id">
              <td>{{ formatDate(record.timestamp) }}</td>
              <td>
                <span class="detection-type" :class="record.type">
                  {{ getTypeLabel(record.type) }}
                </span>
              </td>
              <td class="content-summary">{{ record.summary }}</td>
              <td>
                <span class="result-badge" :class="record.result">
                  {{ getResultLabel(record.result) }}
                </span>
              </td>
              <td>
                <div class="confidence-bar">
                  <div class="confidence-fill" :style="{ width: record.confidence + '%' }"></div>
                  <span class="confidence-text">{{ record.confidence }}%</span>
                </div>
              </td>
              <td>
                <button class="btn btn-sm btn-primary" @click="viewDetails(record.id)">
                  查看详情
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 系统状态 -->
    <div class="system-status">
      <h2 class="section-title">系统状态</h2>
      
      <!-- 系统健康评分 -->
      <div class="health-score">
        <div class="score-circle">
          <div class="score-inner">
            <span class="score-number">{{ systemHealth.score }}</span>
            <span class="score-label">健康评分</span>
          </div>
        </div>
        <div class="health-info">
          <div class="health-item">
            <span class="health-label">系统状态</span>
            <span class="health-value" :class="systemHealth.status">
              {{ getHealthStatusLabel(systemHealth.status) }}
            </span>
          </div>
          <div class="health-item">
            <span class="health-label">运行时间</span>
            <span class="health-value">{{ systemHealth.uptime }}</span>
          </div>
          <div class="health-item">
            <span class="health-label">最后检查</span>
            <span class="health-value">{{ formatDate(systemHealth.lastCheck) }}</span>
          </div>
        </div>
      </div>

      <!-- 服务状态 -->
      <div class="service-status">
        <h3 class="subsection-title">服务状态</h3>
        <div class="status-grid">
          <div class="status-item" v-for="service in serviceStatus" :key="service.name">
            <div class="service-info">
              <div class="status-indicator" :class="service.status"></div>
              <div class="service-details">
                <span class="service-name">{{ service.name }}</span>
                <span class="service-desc">{{ service.description }}</span>
              </div>
            </div>
            <div class="service-metrics">
              <div class="metric-item">
                <span class="metric-label">响应时间</span>
                <span class="metric-value">{{ service.responseTime }}ms</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">可用性</span>
                <span class="metric-value">{{ service.availability }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 系统资源使用情况 -->
      <div class="resource-usage">
        <h3 class="subsection-title">系统资源</h3>
        <div class="resource-grid">
          <div class="resource-item" v-for="resource in systemResources" :key="resource.name">
            <div class="resource-header">
              <span class="resource-name">{{ resource.name }}</span>
              <span class="resource-value">{{ resource.used }}% / {{ resource.total }}</span>
            </div>
            <div class="resource-bar">
              <div class="resource-fill" 
                   :style="{ width: resource.used + '%' }"
                   :class="getResourceClass(resource.used)">
              </div>
            </div>
            <div class="resource-stats">
              <span class="stat-item">已用: {{ resource.usedValue }}</span>
              <span class="stat-item">可用: {{ resource.availableValue }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 检测引擎状态 -->
      <div class="detection-engines">
        <h3 class="subsection-title">检测引擎</h3>
        <div class="engines-grid">
          <div class="engine-item" v-for="engine in detectionEngines" :key="engine.name">
            <div class="engine-header">
              <div class="engine-status" :class="engine.status"></div>
              <div class="engine-info">
                <h4 class="engine-name">{{ engine.name }}</h4>
                <p class="engine-desc">{{ engine.description }}</p>
              </div>
            </div>
            <div class="engine-metrics">
              <div class="metric-row">
                <div class="metric-col">
                  <span class="metric-label">处理速度</span>
                  <span class="metric-value">{{ engine.processSpeed }}/s</span>
                </div>
                <div class="metric-col">
                  <span class="metric-label">准确率</span>
                  <span class="metric-value">{{ engine.accuracy }}%</span>
                </div>
              </div>
              <div class="metric-row">
                <div class="metric-col">
                  <span class="metric-label">队列长度</span>
                  <span class="metric-value">{{ engine.queueLength }}</span>
                </div>
                <div class="metric-col">
                  <span class="metric-label">今日处理</span>
                  <span class="metric-value">{{ engine.todayProcessed }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实时监控图表 -->
      <div class="monitoring-charts">
        <h3 class="subsection-title">实时监控</h3>
        <div class="charts-grid">
          <div class="chart-item">
            <h4 class="chart-title">CPU使用率</h4>
            <div class="chart-container">
              <canvas ref="cpuChart" width="300" height="150"></canvas>
            </div>
          </div>
          <div class="chart-item">
            <h4 class="chart-title">内存使用率</h4>
            <div class="chart-container">
              <canvas ref="memoryChart" width="300" height="150"></canvas>
            </div>
          </div>
          <div class="chart-item">
            <h4 class="chart-title">检测请求量</h4>
            <div class="chart-container">
              <canvas ref="requestChart" width="300" height="150"></canvas>
            </div>
          </div>
          <div class="chart-item">
            <h4 class="chart-title">系统负载</h4>
            <div class="chart-container">
              <canvas ref="loadChart" width="300" height="150"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const stats = ref({
  totalDetections: 1234,
  blockedThreats: 89,
  aiDetections: 567,
  voiceAnalysis: 123
})

const recentDetections = ref([
  {
    id: 1,
    timestamp: '2024-01-15 14:30:00',
    type: 'rumor',
    summary: '关于某地疫情的消息...',
    result: 'suspicious',
    confidence: 85
  },
  {
    id: 2,
    timestamp: '2024-01-15 13:45:00',
    type: 'fraud',
    summary: '银行卡冻结通知短信...',
    result: 'dangerous',
    confidence: 92
  },
  {
    id: 3,
    timestamp: '2024-01-15 12:20:00',
    type: 'ai',
    summary: '一张看似真实的人物照片...',
    result: 'ai-generated',
    confidence: 78
  },
  {
    id: 4,
    timestamp: '2024-01-15 11:15:00',
    type: 'voice',
    summary: '可疑的语音通话录音...',
    result: 'safe',
    confidence: 95
  },
  {
    id: 5,
    timestamp: '2024-01-15 10:30:00',
    type: 'rumor',
    summary: '网络流传的健康谣言...',
    result: 'suspicious',
    confidence: 88
  }
])

// 系统健康状态
const systemHealth = ref({
  score: 94,
  status: 'excellent',
  uptime: '7天 14小时 32分钟',
  lastCheck: new Date().toISOString()
})

// 服务状态
const serviceStatus = ref([
  {
    name: 'API网关',
    description: '主要API服务接口',
    status: 'online',
    responseTime: 45,
    availability: 99.9
  },
  {
    name: '检测引擎',
    description: '核心检测服务',
    status: 'online',
    responseTime: 120,
    availability: 99.8
  },
  {
    name: '数据库',
    description: 'MySQL主数据库',
    status: 'online',
    responseTime: 28,
    availability: 99.9
  },
  {
    name: '缓存服务',
    description: 'Redis缓存集群',
    status: 'online',
    responseTime: 15,
    availability: 99.7
  },
  {
    name: '存储服务',
    description: '文件存储系统',
    status: 'warning',
    responseTime: 200,
    availability: 98.5
  },
  {
    name: '消息队列',
    description: '异步处理队列',
    status: 'online',
    responseTime: 32,
    availability: 99.6
  }
])

// 系统资源使用情况
const systemResources = ref([
  {
    name: 'CPU使用率',
    used: 45,
    total: '16核',
    usedValue: '7.2核',
    availableValue: '8.8核'
  },
  {
    name: '内存使用率',
    used: 68,
    total: '32GB',
    usedValue: '21.8GB',
    availableValue: '10.2GB'
  },
  {
    name: '磁盘使用率',
    used: 72,
    total: '1TB',
    usedValue: '720GB',
    availableValue: '280GB'
  },
  {
    name: '网络带宽',
    used: 35,
    total: '1Gbps',
    usedValue: '350Mbps',
    availableValue: '650Mbps'
  }
])

// 检测引擎状态
const detectionEngines = ref([
  {
    name: '文本检测引擎',
    description: '基于XLNet的文本分析引擎',
    status: 'online',
    processSpeed: 1250,
    accuracy: 94.5,
    queueLength: 23,
    todayProcessed: 8569
  },
  {
    name: '图像检测引擎',
    description: '基于ResNet50的图像识别引擎',
    status: 'online',
    processSpeed: 580,
    accuracy: 91.2,
    queueLength: 12,
    todayProcessed: 3247
  },
  {
    name: '视频检测引擎',
    description: 'CNN+LSTM视频分析引擎',
    status: 'online',
    processSpeed: 45,
    accuracy: 88.7,
    queueLength: 8,
    todayProcessed: 567
  },
  {
    name: '音频检测引擎',
    description: '深度学习声纹识别引擎',
    status: 'warning',
    processSpeed: 320,
    accuracy: 92.8,
    queueLength: 35,
    todayProcessed: 1234
  }
])

// 图表引用
const cpuChart = ref(null)
const memoryChart = ref(null)
const requestChart = ref(null)
const loadChart = ref(null)

// 实时数据更新定时器
let updateInterval = null

// 方法
const quickAction = (type) => {
  const routes = {
    rumor: '/user/rumor-detection',
    fraud: '/user/anti-fraud',
    ai: '/user/ai-content-detection',
    voice: '/user/voiceprint-recognition'
  }
  
  if (routes[type]) {
    router.push(routes[type])
  }
}

const formatDate = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getTypeLabel = (type) => {
  const labels = {
    rumor: '谣言检测',
    fraud: '反诈预警',
    ai: 'AI识别',
    voice: '声纹分析'
  }
  return labels[type] || type
}

const getResultLabel = (result) => {
  const labels = {
    safe: '安全',
    suspicious: '可疑',
    dangerous: '危险',
    'ai-generated': 'AI生成'
  }
  return labels[result] || result
}

const getHealthStatusLabel = (status) => {
  const labels = {
    excellent: '优秀',
    good: '良好',
    warning: '警告',
    critical: '严重'
  }
  return labels[status] || status
}

const getResourceClass = (usage) => {
  if (usage >= 80) return 'critical'
  if (usage >= 60) return 'warning'
  return 'normal'
}

const viewDetails = (id) => {
  router.push(`/user/detection-result/${id}`)
}

// 绘制简单的图表
const drawChart = (canvas, data, color) => {
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  const width = canvas.width
  const height = canvas.height
  
  // 清空画布
  ctx.clearRect(0, 0, width, height)
  
  // 绘制背景
  ctx.fillStyle = '#f8f9fa'
  ctx.fillRect(0, 0, width, height)
  
  // 绘制网格
  ctx.strokeStyle = '#e9ecef'
  ctx.lineWidth = 1
  
  // 水平网格线
  for (let i = 0; i <= 4; i++) {
    const y = (height / 4) * i
    ctx.beginPath()
    ctx.moveTo(0, y)
    ctx.lineTo(width, y)
    ctx.stroke()
  }
  
  // 垂直网格线
  for (let i = 0; i <= 10; i++) {
    const x = (width / 10) * i
    ctx.beginPath()
    ctx.moveTo(x, 0)
    ctx.lineTo(x, height)
    ctx.stroke()
  }
  
  // 绘制数据线
  ctx.strokeStyle = color
  ctx.lineWidth = 2
  ctx.beginPath()
  
  data.forEach((value, index) => {
    const x = (width / (data.length - 1)) * index
    const y = height - (value / 100) * height
    
    if (index === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
  })
  
  ctx.stroke()
  
  // 绘制填充区域
  ctx.lineTo(width, height)
  ctx.lineTo(0, height)
  ctx.closePath()
  ctx.fillStyle = color + '20'
  ctx.fill()
}

// 更新实时数据
const updateRealTimeData = () => {
  // 更新系统资源使用率
  systemResources.value.forEach(resource => {
    const change = (Math.random() - 0.5) * 10
    resource.used = Math.max(0, Math.min(100, resource.used + change))
  })
  
  // 更新检测引擎队列长度
  detectionEngines.value.forEach(engine => {
    const change = Math.floor((Math.random() - 0.5) * 10)
    engine.queueLength = Math.max(0, engine.queueLength + change)
  })
  
  // 更新系统健康评分
  systemHealth.value.lastCheck = new Date().toISOString()
  
  // 更新图表数据
  const cpuData = Array.from({ length: 20 }, () => Math.random() * 100)
  const memoryData = Array.from({ length: 20 }, () => Math.random() * 100)
  const requestData = Array.from({ length: 20 }, () => Math.random() * 100)
  const loadData = Array.from({ length: 20 }, () => Math.random() * 100)
  
  drawChart(cpuChart.value, cpuData, '#1e3c72')
  drawChart(memoryChart.value, memoryData, '#28a745')
  drawChart(requestChart.value, requestData, '#ffc107')
  drawChart(loadChart.value, loadData, '#dc3545')
}

// 生命周期
onMounted(() => {
  // 初始化图表
  setTimeout(() => {
    updateRealTimeData()
  }, 100)
  
  // 设置定时更新
  updateInterval = setInterval(updateRealTimeData, 5000)
})

onUnmounted(() => {
  if (updateInterval) {
    clearInterval(updateInterval)
  }
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .dashboard {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .dashboard {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .dashboard {
    width: 100%;
    padding: 10px;
  }
}

.page-header {
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1e3c72;
  margin: 0 0 10px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1e3c72, #2a5298);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.stat-icon svg {
  width: 30px;
  height: 30px;
  fill: white;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1e3c72;
  margin: 0 0 5px 0;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 快速操作 */
.quick-actions {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 0 20px 0;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.action-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1e3c72, #2a5298);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.action-icon svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.action-card h3 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
}

.action-card p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 最近检测记录 */
.recent-detections {
  margin-bottom: 40px;
}

.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detection-table {
  width: 100%;
  border-collapse: collapse;
}

.detection-table th {
  background: #f8f9fa;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e9ecef;
}

.detection-table td {
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
}

.detection-table tr:last-child td {
  border-bottom: none;
}

.detection-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.detection-type.rumor {
  background: #17a2b8;
}

.detection-type.fraud {
  background: #dc3545;
}

.detection-type.ai {
  background: #6f42c1;
}

.detection-type.voice {
  background: #28a745;
}

.content-summary {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.result-badge.safe {
  background: #28a745;
}

.result-badge.suspicious {
  background: #ffc107;
  color: #333;
}

.result-badge.dangerous {
  background: #dc3545;
}

.result-badge.ai-generated {
  background: #6f42c1;
}

.confidence-bar {
  position: relative;
  width: 80px;
  height: 20px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #28a745, #20c997);
  transition: width 0.3s ease;
}

.confidence-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 500;
  color: #333;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-primary:hover {
  background: #2a5298;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

/* 系统状态 */
.system-status {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.health-score {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.score-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1e3c72, #2a5298);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.score-inner {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.score-number {
  font-size: 36px;
}

.score-label {
  font-size: 12px;
  color: #ccc;
}

.health-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.health-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.health-label {
  font-size: 14px;
  color: #666;
}

.health-value {
  font-size: 16px;
  font-weight: bold;
  color: #1e3c72;
}

.health-value.excellent {
  color: #28a745;
}

.health-value.good {
  color: #28a745;
}

.health-value.warning {
  color: #ffc107;
}

.health-value.critical {
  color: #dc3545;
}

.subsection-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 15px 0;
}

.service-status, .resource-usage, .detection-engines {
  margin-bottom: 20px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.service-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-details {
  display: flex;
  flex-direction: column;
}

.service-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.service-desc {
  font-size: 12px;
  color: #666;
  margin-top: 3px;
}

.service-metrics {
  display: flex;
  gap: 10px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.metric-label {
  font-size: 12px;
  color: #666;
}

.metric-value {
  font-size: 16px;
  font-weight: bold;
  color: #1e3c72;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.resource-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.resource-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.resource-value {
  font-size: 14px;
  color: #666;
}

.resource-bar {
  width: 100%;
  height: 10px;
  background: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.resource-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.resource-fill.normal {
  background: #28a745;
}

.resource-fill.warning {
  background: #ffc107;
}

.resource-fill.critical {
  background: #dc3545;
}

.resource-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.engines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.engine-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.engine-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.engine-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.engine-status.online {
  background: #28a745;
}

.engine-status.warning {
  background: #ffc107;
}

.engine-status.offline {
  background: #dc3545;
}

.engine-info {
  display: flex;
  flex-direction: column;
}

.engine-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.engine-desc {
  font-size: 12px;
  color: #666;
  margin: 3px 0 0 0;
}

.engine-metrics {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.metric-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.monitoring-charts {
  margin-top: 20px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.chart-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.chart-container {
  width: 100%;
  height: 150px;
  position: relative;
}

.chart-container canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-indicator.online {
  background: #28a745;
}

.status-indicator.warning {
  background: #ffc107;
}

.status-indicator.offline {
  background: #dc3545;
}

.status-label {
  font-size: 14px;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard {
    padding: 15px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .detection-table {
    font-size: 12px;
  }

  .detection-table th,
  .detection-table td {
    padding: 10px 8px;
  }

  .content-summary {
    max-width: 100px;
  }

  .health-score {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .score-circle {
    width: 80px;
    height: 80px;
    font-size: 20px;
  }

  .score-number {
    font-size: 30px;
  }

  .health-info {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
  }

  .health-item {
    flex-direction: column;
    align-items: center;
  }

  .health-label {
    margin-bottom: 5px;
  }

  .subsection-title {
    font-size: 16px;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .service-metrics, .engine-metrics {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .metric-row {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .metric-col {
    align-items: center;
  }

  .monitoring-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .action-grid {
    grid-template-columns: 1fr;
  }

  .table-container {
    overflow-x: auto;
  }

  .detection-table {
    min-width: 600px;
  }
}
</style> 